<template>
	<view class="cu-page mine-page">
		<nav-bar :hideBack="true" :transparent="true"></nav-bar>
		<view class="top-empty" :style="{width:'750rpx',height:menuButtonInfo.bottom + 24 +'px'}"></view>
		<view class="user-info-box">
			<view class="user-info-left">
				<view type="userNickName">小You·</view>
			</view>
			<view class="user-info-right">
				<view type="userAvatarUrl">toux</view>
			</view>
		</view>
		<view class="vip-box" >
			<view class="vip-left-box cu-flex-center">
				<image class="vip-icon" mode="aspectFit" src="../../static/icons/vip.png"></image>
			</view>
			<view class="vip-left-right">
				<text class="vip-title">You图壁纸VIP</text>
				<block v-if="myInfo">
					<text class="vip-notice" v-if="!myInfo.isVip">您还未开通VIP</text>
					<text class="vip-notice f8" v-else>有效期</text>
				</block>
			</view>
			<view class="vip-right">
				<text style="margin-right:10rpx;">{{myInfo.isVip?'续费':'立即开通'}}</text>
				<text class="black-right-arrows"></text>
			</view>
		</view>
		<view class="my-number-box">
			<view class="my-number-item cu-flex-center">
				<text class="my-number-item-title">我的赞</text>
				<text class="my-number-item-number">{{endLoading?myInfo.collectNum:'-'}}</text>
			</view>
			<view class="my-number-item-line"></view>
			<view class="my-number-item cu-flex-center">
				<text class="my-number-item-title">近期下载</text>
				<text class="my-number-item-number">{{endLoading?myInfo.downloadNum:'-'}}</text>
			</view>
		</view>
		<button class="options-item options-item-border" :plain="true">
			<image class="options-item-icon" mode="aspectFit" src="../../static/icons/wxqun.png"></image>
			<text class="options-item-title">微信公众号</text>
			<text class="right-arrows"></text>
		</button>
		<button class="options-item options-item-border" :plain="true">
			<image class="options-item-icon" mode="aspectFit" src="../../static/icons/wx.png"></image>
			<text class="options-item-title">QQ交流群</text>
			<text class="right-arrows"></text>
		</button>
		<button class="options-item options-item-border" openType="feedback" :plain="true">
			<image class="options-item-icon" mode="aspectFit" src="../../static/icons/feedback.png"></image>
			<text class="options-item-title">意见反馈</text>
			<text class="right-arrows"></text>
		</button>
		<button class="options-item" :plain="true">
			<image class="options-item-icon" mode="aspectFit" src="../../static/icons/info.png"></image>
			<text class="options-item-title">用户与隐私协议</text>
			<text class="right-arrows"></text>
		</button>
		<cu-end-empty></cu-end-empty>
	</view>
</template>

<script>
	import navBar from '../../components/nav-bar/nav-bar.vue'
	import cuEndEmpty from '../../components/cu-end-empty/cu-end-empty.vue'
	export default {
		data() {
			return {
				deviceInfo:{},
				menuButtonInfo: uni.getMenuButtonBoundingClientRect(),
				myInfo:{
					isVip:true,
					collectNum:250,
					downloadNum:6
				},
				endLoading:true
			}
		},
		onShow:function(){
			console.log("mineDisplay")
		},
		created:function(){
			console.log("created")
			this.deviceInfo = JSON.parse(JSON.stringify(uni.getStorageSync('deviceInfo')))
			console.log(this.deviceInfo,'created-end')
		},
		methods: {
			
		},
		components:{
			navBar,cuEndEmpty
		},
		props: {
			display: {
				type: Number,
				default: ""
			},
		},
		watch:{
			display:function(val){
				if(val == 3){
					
					console.log("mineDisplay",'watch')
				}
			}
		}
	}
</script>

<style>
.mine-page {
    background-image: url();
    background-repeat: no-repeat;
    background-size: 400rpx;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

.mine-page,.user-info-box {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.user-info-box {
    width: 750rpx;
    padding-left: 50rpx;
    padding-right: 50rpx;
    -webkit-box-pack: justify;
    justify-content: space-between;
}

.user-info-left {
    font-size: 38rpx;
    font-weight: 700;
}

.user-info-right {
    width: 100rpx;
    height: 100rpx;
    border-radius: 100rpx;
    overflow: hidden;
    border: 2px solid #fcbe62;
}

.vip-box {
    width: 630rpx;
    height: 140rpx;
    background-color: #fff;
    border-radius: 16rpx 16rpx 0 0;
    margin-top: 42rpx;
    background-image: url();
    background-repeat: no-repeat;
    background-size: cover;
    background-position: 50%;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    padding-left: 20rpx;
}

.vip-left-box {
    width: 74rpx;
    height: 74rpx;
    background: linear-gradient(180deg,#585858,#202020);
    border-radius: 50%;
}

.vip-icon {
    width: 40rpx;
    height: 40rpx;
}

.vip-left-right {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    margin-left: 20rpx;
    -webkit-box-flex: 1;
    flex: 1;
}

.vip-title {
    font-size: 28rpx;
    font-weight: 700;
    color: #333;
}

.vip-notice {
    font-size: 24rpx;
    color: rgba(0,0,0,.3);
    margin-top: 10rpx;
}

.vip-right {
    padding-right: 20rpx;
    color: rgba(0,0,0,.3);
    font-size: 26rpx;
}

.my-number-box,.vip-right {
    display: flex;
    -webkit-box-align: center;
    align-items: center;
}

.my-number-box {
    width: 686rpx;
    height: 160rpx;
    background-color: #212121;
    border-radius: 16rpx;
}

.my-number-item {
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 1;
    flex: 1;
}

.my-number-item-title {
    font-size: 26rpx;
    color: #686868;
}

.my-number-item-number {
    font-size: 36rpx;
    color: #fff;
    margin-top: 24rpx;
}

.my-number-item-line {
    width: 1px;
    height: 22rpx;
    background-color: rgba(0,255,255,.08);
}

.options-item {
    width: 606rpx;
    height: 120rpx;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    border: none!important;
    border-radius: 0;
    padding: 0;
    margin: 0;
}

.options-item-border {
    border-bottom: 1px solid hsla(0,0%,100%,.06)!important;
}





.options-item-icon {
    width: 44rpx;
    height: 44rpx;
}

.options-item-title {
    font-size: 32rpx;
    color: #fff;
    margin-left: 34rpx;
    -webkit-box-flex: 1;
    flex: 1;
    text-align: left;
}

.right-arrows {
    border-top: 2px solid hsla(0,0%,100%,.3);
    border-right: 2px solid hsla(0,0%,100%,.3);
}

.black-right-arrows,.right-arrows {
    width: 20rpx;
    height: 20rpx;
    transform: rotate(45deg);
    margin-right: 10rpx;
}

.black-right-arrows {
    border-top: 1px solid rgba(0,0,0,.3);
    border-right: 1px solid rgba(0,0,0,.3);
}
</style>
